<script setup>
import { ref } from 'vue'
/*
  注意点
  ref函数包裹的响应式数据
  -在模版中正常使用
  -在script标签中.value 使用
  ref函数可以包裹全部数据
 */
const person = ref({
  name: '张三',
  age: 18
})
const changeName = () => person.value.name = '李四'
const addAge = () => person.value.age++

const car = ref('自行车')
</script>

<template>
  <div>{{ person }}</div>
  <button @click="changeName">修改姓名</button>
  <button @click="addAge">增加年龄</button>
  <hr>
  <div>{{ car }}</div>
  <button @click="car = '小米'">换车</button>
</template>

<style scoped></style>